<template>
	<view class="user-order">
		<!-- header -->
		<view class="od-line2" @click="onNav2">
			<view
			 v-for="(item, index) in title"
			 :key="index"
			 :id="index"
			 :class="['item', swiperCurrent == index ? 'line2-active': '']"
			>
				{{ item.text }}({{ item.num }})
			</view>
		</view>

		<swiper :duration="300" @change="changeSwiper" class="ud-swiper" :current="swiperCurrent">
			<!-- 第一块轮播  最新留言 -->
			<swiper-item v-for="(views, indexs) in data" :key="indexs">
				<!-- 可滚动区域 -->
				<scroll-view :scroll-y="true" class="scrollStyle">
					<view
					 class="content-box"
					 v-for="(components, index) in views"
					 :key="index"
					>
						<view class="top">
							<view class="top-item">
								<image :src="components.goods.img" :lazy-load="true"></image>
								<view class="top-box1">
									<text>{{ components.goods.text }}</text>
								</view>
							</view>
							<view class="top-item2">
								<text>￥{{ components.goods.price }}</text>
							</view>
						</view>
						<view class="buttom" v-for="(messages, sub) in components.message">
							<view class="buttom-top">
								<view class="item1">
									<image :src="messages.img" :lazy-load="true"></image>
									<text>{{ messages.name }}</text>
								</view>
								<view class="item2">
									<view class="reply">
										<image src="/static/imgs/myStore/btn_xiaoxi.png" mode=""></image>
										<text>回复</text>
									</view>
									<view class="like">
										<image src="/static/imgs/myStore/btn_zan.png" mode=""></image>
										<text>点赞</text>
									</view>
								</view>
							</view>
							<view class="delivery">
								<text>{{ messages.content }}</text>
							</view>
							<view class="messageImg" v-if="messages.images">
								<view v-for="(image, imgIndex) in messages.images" :key="imgIndex">
									<view>
										<image :src="image"></image>
									</view>
								</view>
							</view>
							<view
							 v-if="messages.reply"
							 v-for="(replys, subs) in messages.reply"
							 :key="sub"
							 class="store"
							>
								<view class="store-img">
									<image :src="replys.img" :lazy-load="true"></image>
									<text>{{ replys.name }}</text>
									<view>
										<text>店家</text>
									</view>
								</view>
								<view class="store-reply">
									<text>{{ replys.content }}</text>
								</view>
							</view>
							<view
							 v-if="messages.evaluation"
							 v-for="(evaluations, sub) in messages.evaluation"
							 :key="sub"
							 class="store"
							>
								<view class="store-img">
									<image :src="evaluations.img" :lazy-load="true"></image>
									<text>{{ evaluations.name }}</text>
									<view>
										<text>店家</text>
									</view>
								</view>
								<view class="store-reply">
									<text>{{ evaluations.content }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: Array,
				default: []
			},
			data: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				swiperCurrent: 0
			}
		},
		onLoad(option) {
			this.swiperCurrent = option.id
		},
		methods: {
			onNav2(e) {
				this.swiperCurrent = e.target.id
			},
			changeSwiper(e) {
				this.swiperCurrent = e.target.current
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/leaveComments.scss';

	/* #ifdef MP-WEIXIN */
	.ud-swiper {
		height: 1140upx;

	}

	/* #endif */
</style>